<template>
    <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect">
        <el-menu-item   v-for="(item,index) in childAttributes" :key="index" :index="index">{{item.title}}</el-menu-item>
    </el-menu>
    <div  v-for="(item,index) in childAttributes" :key="index">
     <Description v-if="item.type == '1TO1'" v-show="(activeIndex - 1) == index" size="default" :field-list="item.fields" :data="item.data" :border="true"></Description>
     <Collapse  v-else-if="item.type == '1TON'" v-show="(activeIndex - 1) == index" :field-list="item.fields" :data="item.data" > </Collapse>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import Description from '@/components/common/description/Description.vue'
import Collapse from '@/components/common/collapse/Collapse.vue'
import {Field,OperationAttribute,Attribute} from '@/components/common/horizontalMeau/AttributeInterface'

/**
 * 功能描述:
 *      接受一组挂载属性，按顺序进行展示
 */

//定义接口对象 此处ts 接口仅作便于理解使用
// interface Field{
//     name:String,
//     type:String,
//     label:String
// }

// interface OperationAttribute{
//     //操作属性
//     getUrl?:String //选填，获取data的url
//     getVo?:Object //选填，用于get的requestVo,不建议使用,在此组件进行get的内容不建议细化区分，此处只是备用
//     addUrl?:String //选填，添加data 的url 搭配 data 一起使用
//     updateUrl?:String //选填，更新data 的url 搭配 data 一起使用
//     deleteUrl?:String //选填，删除data 的url 搭配 data 一起使用
// }

// interface Attribute{
    
//     //基础属性
//     title:String //此处一般对应表中文明 在当前组件中, 会显示在el-menu-item
//     fields:Array<Field> //Field内部就是name label type 三种类型 
//     type:"1TO1"|"1TON" //类型 确定是1对1 1对n 分别对应 Description 和 Collapse
//     data?:Object //实际的内容值，选填，它可由 url进行获取

//     operation?:OperationAttribute
// }


defineProps({
    
    // 挂载属性 
    childAttributes: {
        type: Array<Attribute>,
        default: () => ([{}])
    },

})





const activeIndex = ref(1)

const handleSelect = (key: number, keyPath: string[]) => {
    console.log(key, keyPath)
    console.log(activeIndex.value)
    activeIndex.value = key
}


</script>
    
<style>

</style>